<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_2973804_ddtcz4vvlhg/iconfont.css">
    <style>
        header{
            height: 100px;
            background-color: white;
            border-bottom: 1px solid orange;
        }
        header .center{
            height: 100px;
            width: 1535px;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header .center .left{
            width: 300px;
            height: 60px;
            display: flex;
            justify-content: space-around;

        }
        header .center .left img{
            width: 60px;
            height: 60px;
        }
        header .center .left p{
            font-size: 36px;
        }
        header .center .right{
            width: 230px;
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        header .center .right select{
            border: none;
            height: 40px;
            
        }
        header .center .right span{
            padding-left: 20px;
            border-left: 1px solid #999;
        }

       table {
            
            width: 1035px;
            margin: 100px auto;
            text-align: center;
            border: 1px solid hotpink;
            border-collapse: collapse;
        }
        
        table th {
            /* background: yellow; */
            height: 2.5em;
            margin: 0 auto;
        }
        
        table tr {
            height: 2.5em;
            margin: 0 auto;
            text-align: center;
          
        }

        td {

            padding: 3px;

        }

        td>img {

            width: 80px;

            height: 50px;

        }

        .jia {

            padding: 5px;

        }

        .jian {

            padding: 5px;

        }

        .txt {

            width: 100px;

            height: 25px;

        }
    </style>
</head>

<body>
    <header>
        <div class="center">
        <div class="left">
            <h1><img src="img/logo-mi2.png" alt=""></h1>
            <p>我的购物车</p>
        </div>
        <div class="right">
            <select name="" id="">
                <option value="">个人中心</option>
                <option value="">评价晒单</option>
                <option value="">我的喜欢</option>
                <option value="">小米账户</option>
                <option value="">退出登录</option>
            </select>
            <span>我的订单</span>
        </div>
    </div> 
    </header>

    <table cellspacing='0' cellpadding='0'>

        <thead>

            <tr>

                <th>

                    <input type="checkbox" id="all">全选

                </th>

                <th>商品</th>

                <th>单价</th>

                <th>数量</th>

                <th>小计</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>

                    <input type="checkbox" class="dx" checked="checked">

                </td>

                <td>

                    <img src="img/33.webp" alt="">

                    Redmi 手表 2 深蓝色

                </td>

                <td>378</td>

                <td>

                    <input type="button" value="-" class="jian">

                    <input type="text" class="txt" value="1">

                    <input type="button" value="+" class="jia">

                </td>

                <td>999</td>

                <td><a>删除</a></td>

            </tr>


        </tbody>

        <tfoot>

            <tr>

                <td colspan="6">

                    <input type="button" value="选中删除" id="xs">

                    <input type="button" value="清空购物车" id="qk">

                    已选择<strong>1</strong>件商品

                    总价：<strong>379</strong>

                </td>

            </tr>

        </tfoot>

    </table>
<footer></footer>

</body>

</html>
<script src="js/jQuery.js"></script>

<script>
    $("footer").load("footer.html");
    $('#all').click(function () {

        // 当前复选框的属性

        var status = $(this).prop('checked')

        // 选中的属性

        $('.dx').prop('checked', status)

        zj() //调用总价

    })

    //判断当前的全选按钮是否选中

    function check_all() {

        //获取class为dx的所有的复选框的个数

        var dx = $(".dx").length;



        // 获取选中的复选框的个数

        var dx1 = $(".dx:checked").length;



        if (dx == dx1) {

            $("#all").prop("checked", true);

        } else {

            $("#all").prop("checked", false);

        }

    }

    //给按钮绑定点击事件，调用全选按钮的判断条件

    $(".dx").click(function () {

        check_all();



        zj(); // 总价

    })











    // 选中删除

    $('#xs').click(function () {

        // 遍历复选框是否选中

        $('.dx').each(function (index, item) {

            // 如果复选框属性等于true

            if ($(item).prop('checked') == true) {

                // 当前元素的父元素的父元素删除

                $(this).parent().parent().remove()

            }

        })

        zj() // 总价

    })

    // 减

    $('.jian').click(function () {

        // 获取当前元素的下一个兄弟元素的val值

        var num = parseInt($(this).next().val());

        num--;

        if (num = 1) {

            num = 1;

        }

        // 当前元素的下一个兄弟元素val值是num

        $(this).next().val(num)

        zj() // 总价

    })





    // 加

    $('.jia').click(function () {

        // 获取当前元素的上一个兄弟元素的val值

        var num = parseInt($(this).prev().val());

        num++;

        // 当前元素的上一个兄弟元素的val值为num

        $(this).prev().val(num)

        zj() // 总价

    })







    // 删除

    $('tr>td>a').click(function () {

        // 当前父元素的父元素删除

        $(this).parent().parent().remove();

        zj() // 总价

    })





    // 总价

    function zj() {

        var zj = 0.00; //商品总价

        var sl = 0; //选中商品数量

        $('.dx:checked').each(function () {

            // 单价

            var dj = $(this).parent().nextAll().eq(1).text();



            // 商品数量

            var num = $(this).parent().nextAll().eq(2).children('.txt').val()



            // 总价

            zj += num * dj;



            //数量

            sl += parseInt(num);





        })

        // 选中商品的总数量

        $('strong').eq(0).text(sl);

        // 总计商品的总价格

        $('strong').eq(1).text(zj.toFixed(2));



        // 遍历选中商品

        $('.dx').each(function () {

            // 单价

            var dj = $(this).parent().nextAll().eq(1).text();



            //商品数量

            var num = $(this).parent().nextAll().eq(2).children('.txt').val()



            // 总价

            var totals = num * dj;



            $(this).parent().nextAll().eq(3).text(totals.toFixed(2))

        })



    }

    zj()
</script>